<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
	
	<p:dataGrid var="pack" value="#{packages}" columns="3" rows="12" paginator="true">
		<p:panel header="#{pack.name}" style="text-align:center">  
            <h:panelGrid columns="1" style="width:100%">
            	<div style="max-width: 200px; max-height: 200px"> 
                	<p:graphicImage rendered="#{pack.image != ''}" value="#{pack.image}" style="max-width: 200px; max-height: 200px"/>   
  				</div>
  				
                <span class="ui-widget-header ui-corner-all" style="display: inline-block; margin: 3px; width: 200px; padding: 3px; text-align: center;">#{pack.duration} Notti a soli: #{pack.price} €</span>
                
                <h:panelGroup rendered="#{employee}">
                	<p:button id="edit" value="Modifica" outcome="/employee/packages/edit">
                		<f:param name="packageId" value="#{pack.id}" />
                	</p:button>
                	<p:commandButton id="delete" value="Elimina" action="#{defaultPackageBean.remove(pack)}" />
                </h:panelGroup>  
  				<h:panelGroup rendered="#{! employee}">
                	<p:button id="customize" value="Personalizza" outcome="/customize">
                		<f:param name="packageId" value="#{pack.id}" />
                	</p:button>
                	<p:button id="details" value="Dettagli" outcome="/packageDetails">
                		<f:param name="packageId" value="#{pack.id}" />
                	</p:button>
                </h:panelGroup> 
            </h:panelGrid>  
        </p:panel>  
    </p:dataGrid>  
</ui:composition>